<template>
  <view>
    <view class="content relative">
      <view class="shadow"></view>
      <view class="list_box">
        <view class="list relative">
          <view class="absolute abso_box u-f-ajc">积分余额</view>
          <view class="item title_box u-f-ac u-f-jsb">
            <view class="u-f-ajc">颜色</view>
            <view class="u-f-ajc">积分</view>
          </view>

          <view class="item u-f-ac u-f-jsb" v-if="list.length">
            <view class="u-f-ajc">
              <!-- <image src="/static/images/caidan/caidan1.png" mode="widthFix"></image> -->
              <view>{{list[1].name | filerEggName}}：</view>
            </view>
            <view class="u-f-ajc">{{list[1].num}}</view>
          </view>
          <view class="item u-f-ac u-f-jsb" v-if="list.length">
            <view class="u-f-ajc">
              <!-- <image src="/static/images/caidan/caidan1.png" mode="widthFix"></image> -->
              <view>{{list[3].name | filerEggName}}：</view>
            </view>
            <view class="u-f-ajc">{{list[3].num}}</view>
          </view>
          <view class="item u-f-ac u-f-jsb" v-if="list.length">
            <view class="u-f-ajc">
              <!-- <image src="/static/images/caidan/caidan1.png" mode="widthFix"></image> -->
              <view>{{list[4].name | filerEggName}}：</view>
            </view>
            <view class="u-f-ajc">{{list[4].num}}</view>
          </view>
          <view class="item u-f-ac u-f-jsb" v-if="list.length">
            <view class="u-f-ajc">
              <!-- <image src="/static/images/caidan/caidan1.png" mode="widthFix"></image> -->
              <view>{{list[0].name | filerEggName}}：</view>
            </view>
            <view class="u-f-ajc">{{list[0].num}}</view>
          </view>
          <view class="item u-f-ac u-f-jsb" v-if="list.length">
            <view class="u-f-ajc">
              <!-- <image src="/static/images/caidan/caidan1.png" mode="widthFix"></image> -->
              <view>{{list[2].name | filerEggName}}：</view>
            </view>
            <view class="u-f-ajc">{{list[2].num}}</view>
          </view>


        </view>
        <view class="zhuanchu_box">
          <view class="choose_box u-f-ac u-f-jsb" @click="showSelect=true">
            <view>{{assetList.find(item => item.value == asset).label}}</view>
            <view><u-icon name="arrow-down-fill" color="#E91536"></u-icon></view>
          </view>
          <view class="button_box u-f-ajc" @click="showPopup=true">转出</view>
        </view>
      </view>
    </view>


    <view class="content relative" style="padding: 50rpx 30rpx 200rpx;">
      <view class="shadow"></view>
      <view class="list_box">
        <view class="list relative">
          <view class="absolute abso_box u-f-ajc">积分流水</view>
          <view class="item title_box u-f-ac u-f-jsb">
            <view class="u-f-ajc">颜色</view>
            <view class="u-f-ajc">积分</view>
          </view>

          <view class="item u-f-ac u-f-jsb" v-for="(item, index) in pointsList" :key="index">
            <view>
              <!-- <view>{{item.nickname}}</view> -->
              <view>{{item.mobile}}</view>
            </view>
            <view style="text-align: right;width: auto;">
              <view>{{item.event | filterEvent}}{{item.asset}}:{{item.amount}}</view>
              <view>{{item.create_time | unixToDate('yyyy-MM-dd hh:mm:ss')}}</view>
            </view>
          </view>

        </view>
      </view>
    </view>

    <u-popup v-model="showPopup" mode="bottom" height="55%">
      <view class="popups">
        <view class="f-w-700 u-f-ac u-f-jsb popup_title">
          <view style="opacity: 0;"><u-icon name="close-circle"></u-icon></view>
          <view>转出{{assetList.find(item => item.value == asset).label}}</view>
          <view><u-icon name="close-circle" size="40" @click="showPopup=false"></u-icon></view>
        </view>
        <view class="inputs">
          <view class="input_title" style="margin-bottom: 30rpx;">接收手机号</view>
          <view class="inpupt u-f-ac">
            <view class="f-w-700" style="font-size: 46rpx;"></view>
            <u-input v-model="mobile" type="number" maxlength="11" placeholder="请输入接收手机号"></u-input>
          </view>
        </view>
        <view class="inputs" style="margin: 40rpx 0;">
          <view class="input_title" style="margin-bottom: 30rpx;">转出数量</view>
          <view class="inpupt u-f-ac">
            <view class="f-w-700" style="font-size: 46rpx;"></view>
            <u-input v-model="amt" type="number" placeholder="请输入转出数量"></u-input>
          </view>
        </view>
        <view class="inputs">
          <view class="input_title">支付密码</view>
          <view class="inpupt u-f-ac">
            <!-- <view class="f-w-700" style="font-size: 46rpx;">￥</view> -->
            <u-input v-model="password" type="password" placeholder=" " height="50"></u-input>
          </view>
        </view>

        <view style="padding: 50rpx;">
          <u-button type="error" @click="submit">确认转出</u-button>
        </view>
      </view>
    </u-popup>

    <u-select v-model="showSelect" :list="assetList" @confirm="confirm"></u-select>
    <caidanTbbar :tabbar="2"></caidanTbbar>
  </view>
</template>

<script>
  import * as API_Malls from '@/api/malls.js';

  import caidanTbbar from './caidan_tabbar.vue'

  import md5Libs from "@/libs/function/md5";
  export default {
    components: {
      caidanTbbar
    },
    data() {
      return {
        list: [],
        eggList: [],
        params: {
          pageNo: 1,
          pageSize: 10,
        },
        res: {},
        pointsList: [],

        showPopup: false,
        password: '',
        amt: '',
        mobile: '',
        asset: '1',
        showSelect: false,
        assetList: [{
          value: '1',
          label: '绿色积分'
        }, {
          value: '2',
          label: '红色积分'
        }, {
          value: '3',
          label: '黄色积分'
        }, {
          value: '4',
          label: '白色积分'
        }, {
          value: '5',
          label: '黑色积分'
        }, ],

      }
    },
    filters: {
      filterEvent(val) {
        switch (val) {
          case 10:
            return '获得'
            break;
          case 11:
            return '消费'
            break;
          case 12:
            return '兑换'
            break;
          default:
            return '事件'
            break;
        }
      }
    },
    onLoad() {
      this.getCrazyPoints()
      this.getCrazyInfo()
    },
    methods: {
      async getCrazyInfo() {
        await this.getCrazyEgg()
        let res = await API_Malls.getCrazyInfo()
        let arr = []
        for (let i in res) {
          if (i.length == 2 && i.indexOf('p') != -1 && i != 'cp') {
            let obj = {
              name: i,
              num: res[i]
            }
            arr.push(obj)
          }
        }
        console.log(arr)
        this.list = arr
      },
      async getCrazyEgg() {
        let res = await API_Malls.getCrazyEgg()
        this.eggList = res
      },
      async getCrazyPoints() {
        let res = await API_Malls.getCrazyPoints(this.params)
        this.res = res
        this.pointsList = res.records
      },
      confirm(e) {
        this.asset = e[0].value
      },
      submit() {
        if (!this.$u.test.mobile(this.mobile)) return this.$u.toast('请输入正确的手机号码！')
        if (!this.amt) return this.$u.toast('请输入转出数量！')
        if (!this.password) return this.$u.toast('请输入支付密码')

        this.showPopup = false
        uni.showModal({
          title: '再次提醒~',
          content: `您确认要转出${this.amt}的${this.assetList.find(item => item.value == this.asset).label}给 “${this.mobile}” 吗`,
          confirmText: '确认转出',
          confirmColor: 'rgb(242, 20, 20)',
          cancelText: '取消',
          success: async (res) => {
            if (res.confirm) {
              let res1 = await API_Malls.putCrazyTransferP({
                amt: this.amt,
                mobile: this.mobile,
                asset: this.asset,
                pwd: md5Libs.md5(this.password),
              })
              uni.showToast({
                title: '转出成功！',
                icon: 'none',
              })
              setTimeout(() => {
                this.getCrazyPoints()
                this.getCrazyInfo()
              }, 1200)

            }
          }
        })
      },


    },
  }
</script>

<style lang="scss">
  page {
    background-color: #E91536;
  }

  .content {
    padding: 60rpx 30rpx 200rpx;

    .shadow {
      width: 100%;
      height: 120rpx;
      background: #C6112D;
      border-radius: 30rpx;
    }

    .list_box {
      margin-top: -90rpx;
      width: 100%;
      padding: 0 10rpx;
    }

  }

  .list {
    width: 100%;
    background: #FFFCF0;
    border: 1px solid #FF6264;
    box-shadow: 0px 0px 10rpx 2rpx #FFE478;
    border-radius: 50rpx;
    padding: 40rpx 20rpx;

    .abso_box {
      width: 250rpx;
      height: 66rpx;
      background: url(/static/images/caidan/jifenjilu.png) no-repeat 0 0;
      background-size: 100% 66rpx;
      color: #E91536;
      font-weight: 700;
      top: -46rpx;
      left: 50%;
      margin-left: -125rpx;
    }

    .item {
      color: #8A3D06;
      padding: 16rpx 20rpx;
      border-bottom: 1px dashed #ccc;

      >view {
        width: 33.3%;
      }

      >view:nth-of-type(2) {
        width: 20%;
      }

      image {
        width: 30rpx;
        margin-right: 20rpx;
      }
    }

    .title_box {
      background-color: #FFEBC2;
      // background-color: red;
      border-radius: 50rpx;
      padding: 8rpx 20rpx;
      font-weight: 700;
      border-bottom: none;
      margin-bottom: 10rpx;
    }
  }

  .zhuanchu_box {
    width: 100%;
    background: #FD563F;
    border: 1px solid rgba(255, 252, 240, 0.61);
    border-radius: 30rpx;
    padding: 40rpx 20rpx;
    margin-top: 30rpx;
    color: #E91536;

    .choose_box {
      padding: 16rpx 20rpx;
      background-color: #fff;
      border-radius: 16rpx;
      font-size: 26rpx;
    }

    .button_box {
      width: 100%;
      height: 90rpx;
      background: linear-gradient(180deg, #FFFCF0, #F9D792);
      border-radius: 16rpx;
      margin-top: 30rpx;
      font-weight: 700;
    }
  }

  .popups {
    width: 100%;
    height: 100%;
    padding: 30rpx 50rpx;

    .popup_title {
      margin-bottom: 30rpx;
    }

    .inputs {
      border-bottom: 1px solid #ccc;

      .input_title {
        color: #888;
      }
    }
  }
</style>